<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="../styles/bootstrap.min.css" crossorigin="anonymous">
    <link href="../styles/dashboard.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <nav class="col-md-2 d-none d-md-block bg-light sidebar">
            <div class="sidebar-sticky">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link " href="index.html">
                            <span data-feather="home"></span>电脑列表 </span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#">
                            <span data-feather="file"></span>计划任务<span class="sr-only">(current)</span></a>
                    </li>
                </ul>
            </div>
        </nav>

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
            <h2>计划任务</h2>
            <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addJobModal">添加任务
            </button>
            <div class="table-responsive">
                <table class="table table-striped table-sm">
                    <thead>
                    <tr>
                        <th>计划时间</th>
                        <th>触发事件</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="planlist">
                    </tbody>
                </table>
            </div>
        </main>
    </div>
</div>
<!-- Modal -->
<!-- Modal -->
<div class="modal fade" id="addJobModal" tabindex="-1" role="dialog" aria-labelledby="addJobModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addModalLabel">添加计划任务</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form onsubmit="return false;">
                    <div class="form-group row">
                        <label for="plantime" class="col-sm-3 col-form-label">计划时间(每日)</label>
                        <div class="col">
                            <input type="text" class="form-control" id="plantime" placeholder="时(0-23)">
                        </div>
                        <div class="col">
                            <input type="text" class="form-control" id="planmin" placeholder="分(0-59)">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="planevent" class="col-sm-3 col-form-label">触发事件</label>
                        <div class="col-sm-9">
                            <select id="planevent" class="form-control">
                                <option value="0" selected>请选择</option>
                                <option value="1">一键开机</option>
                                <option value="2">一键关机</option>
                            </select>
                        </div>
                    </div>
                    <fieldset class="form-group">
                        <div class="row">
                            <legend class="col-form-label col-sm-3 pt-0">事件状态</legend>
                            <div class="col-sm-9">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="planStatus" id="gridRadios1"
                                           value="0" checked>
                                    <label class="form-check-label" for="gridRadios1">
                                        启用
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="planStatus" id="gridRadios2"
                                           value="1">
                                    <label class="form-check-label" for="gridRadios2">
                                        禁用
                                    </label>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" onclick="AddPlan()" class="btn btn-primary">添加</button>
            </div>
        </div>
    </div>
</div>

<script src="../js/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
<script src="../js/popper.min.js" crossorigin="anonymous"></script>
<script src="../js/bootstrap.min.js" crossorigin="anonymous"></script>
<script src="../include/plan.js" crossorigin="anonymous"></script>
</body>
</html>